<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>尚品汇</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./font/font_3534928_4ckd8r7u6ei/iconfont.css">
    <style>
        /* 通用样式 */
        body {
            font: 12px/1.3 Microsoft YaHei, Tahoma, Helvetica, Arial, \5b8b\4f53, sans-serif;
            color: #333;
        }

        a {
            color: #333;
            text-decoration: none;
        }

        .clearfix::after,
        .clearfix::before {
            content: '';
            display: block;
            clear: both;
        }

        ul {
            padding: 0;
            margin: 0;
            list-style-type: none;
        }

        /* 顶部条开始 */
        .top-bar-wrapper {
            width: 100%;
            min-width: 1200px;
            height: 30px;
            line-height: 30px;
            background-color: #eaeaea;
        }

        .top-bar {
            margin: 0 auto;
            width: 1200px;
            text-align: center;
        }

        .top-bar a {
            color: #666;
            border-right: 1px #b3aeae solid;
        }

        .top-bar a:hover {
            text-decoration: underline;
            color: lightgreen;
        }

        .top-bar .last {
            border-style: none;
        }

        .top-bar div {
            float: left;
        }

        .top-bar div a {
            padding-left: 5px;
            padding-right: 5px;
        }

        .top-bar ul {
            float: right;
        }

        .top-bar ul li {
            float: left;
        }

        .top-bar ul li a {
            padding-left: 10px;
            padding-right: 10px;
        }

        /* 顶部条结束 */

        /* 页面头部开始 */
        .head {
            width: 1200px;
            height: 106px;
            margin: 0 auto;
        }

        .head .log {
            width: 265px;
            height: 106px;
            line-height: 106px;
            text-align: center;
            float: left;
        }

        .head .log img {
            vertical-align: middle;
        }

        .head .search {
            float: right;
            line-height: 106px;
            font-size: 0;
        }

        .head .search input {
            width: 490px;
            height: 32px;
            padding-left: 4px;
            padding-right: 4px;
            outline: none;
            border: 2px solid #ea4a36;
            box-sizing: border-box;
            font-size: 12px;
        }

        .head .search button {
            width: 68px;
            height: 32px;
            background-color: #ea4a36;
            font-size: 12px;
            color: #fff;
            border-style: none;
            cursor: pointer;
        }

        /* 页面头部结束 */

        /* 顶部菜单开始 */
        .menu {
            width: 100%;
            height: 45px;
            border-bottom: 2px solid #e1251b;
        }

        .menu ul {
            width: 1200px;
            height: 45px;
            line-height: 45px;
            margin: 0 auto;
        }

        .menu ul li {
            float: left;
            font-size: 14px;
            text-align: center;
        }

        .menu ul #list {
            background-color: #e1251b;
            width: 210px;
            color: #fff;
            font-weight: bold;
        }

        .menu ul li a {
            font-size: 16px;
            margin-left: 22px;
            margin-right: 22px;
        }

        /* 顶部菜单结束 */

        /* 页面主体部分开始 */
        .main{
            width: 1200px;
            margin: 0 auto;
        }

        /* 左侧导航列表开始 */
        .main .left-nav-list{
            float: left;
            background-color: #fafafa;
            position: relative;
        }

        .main .left-nav-list li{
            height: 29.6px;
            line-height: 29.6px;
            width: 210px;
            text-align: left;
            padding-left: 20px;
            padding-right: 20px;
            box-sizing: border-box;
        }

        .main .left-nav-list li div{
            position: absolute;
            top: -1px;
            left: 210px;
            bottom: -1px;
            height: auto;
            width: 736px;
            background-color: #f7f7f7;
            display: none;
            z-index: 1;
        }

        .main .left-nav-list li div ul li{
            float: left;
        }

        .main .left-nav-list li:hover {
            background-color: #ffc0cb;
        }

        .main .left-nav-list li:hover div {
            display: block;
        }

        .main .left-nav-list li a {
            font-size: 14px;
            text-decoration: none;
        }

        .main .left-nav-list li a:hover {
            color: #333;
        }
        /* 左侧导航列表结束 */

        /* 轮播图开始 */
        .main .lunbo {
            width: 730px;
            height: 454px;
            float: left;
            position: relative;
            margin-top: 8px;
            margin-left: 5px;
            overflow: hidden;
        }

        .main .lunbo ul {
            position: absolute;
            left: -1459px;
            width: 2190px;
            height: 454px;
        }

        .main .lunbo ul li {
            float: left;
        }

        .lunbo .arrow-prev {
            width: 22.61px;
            height: 44px;
            position: absolute;
            top: 50%;
            margin-top: -22px;
            background-image: url(./img/icon-slides.png);
            background-position: -92px;
        }

        .main .lunbo:hover .arrow-prev {
            background-image: url(./img/icon-slides.png);
            background-position: -8px;
        }

        .lunbo .arrow-next {
            width: 22.61px;
            height: 44px;
            position: absolute;
            right: 0;
            top: 50%;
            margin-top: -22px;
            background-image: url(./img/icon-slides.png);
            background-position: -301px;
        }

        .main .lunbo:hover .arrow-next {
            background-image: url(./img/icon-slides.png);
            background-position: -53px;
        }

        .main .dot {
            width: 48px;
            height: 15.2px;
            /* border: 1px solid green; */
            position: absolute;
            bottom: 10px;
            left: 50%;
            margin-left: -24px;
            box-sizing: border-box;
        }

        .main .dot div {
            width: 8px;
            height: 8px;
            margin-left: 4px;
            margin-right: 4px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, .2);
            float: left;
        }

        .main .dot div:hover {
            background-color: #007aff;
        }
        /* 轮播图结束 */

        /* 右侧栏开始 */
        .right-column{
            width: 250px;
            height: 454px;
            float: right;
            margin-top: 7px;
            border: 1px solid #e4e4e4;
        }

        .right-column .top{
            width: 218px;
            height: 21.6px;
            line-height: 21.6px;
            padding: 5px 10px;
            border-bottom: 1px #e4e4e4 solid;
            margin: 5px 5px 5px 0;
        }

        .right-column .top h4{
            margin: 0;
            float: left;
            font-size: 14px;
            font-weight: bold;
        }

        .right-column .top span{
            float: right;
        }

        .right-column ul{
            width: 218px;
            height: 128px;
            padding: 5px 15px;
        }

        .right-column ul li{
            height: 25.6px;
            line-height: 25.6px;
        }

        .right-column .jingling{
            width: 250px;
            height: 195px;
            border-top: 1px solid #e4e4e4;
        }

        .right-column .jingling div{
            width: 61.5px;
            height: 61.6px;
            border-left: 1px solid #e4e4e4;
            border-bottom: 1px solid #e4e4e4;
            float: left;
            position: relative;
            text-align: center;
            
        }

        .right-column .jingling div span{
            position: absolute;
            top: 2px;
            left: 14px;
        }

        .right-column .jingling div b{
            display:block;
            position: absolute;
            top: 50%;
            margin-top: 9.2px;
            left: 19px;
            font-weight: normal;
        }

        .right-column .jingling div .du{
            left: 12px;
        }

        .right-column div img{
            margin-top: 2px;
        }

        .right-column div img:hover{
            opacity: .7;
        }
        /* 右侧栏结束 */
        /* 页面主体部分结束 */

        /* 推荐栏开始 */
        .recom-column{
            width: 1200px;
            height: 165px;
            margin: 0 auto;
        }

        .recom-column div{
            width: 200px;
            height: 110px;
            padding-top: 27.5px;
            padding-bottom: 27.5px;
            background-color: #5c5251;
            float: left;
            position: relative;
        }

        .recom-column div i,.recom-column div span{
            color: #ffffff;
            position: absolute;
            display: inline-block; 
        }

        .recom-column div i{
            font-size: 65px;
            margin-top: -14px;
            margin-left: 68px;
        }

        .recom-column div span{
            font-size: 18px;
            margin-top: 76px;
            margin-left: 63px; 
            font-weight: bold;
        }

        .recom-column ul{
            width: 1000px;
            height: 165px;
            box-sizing: border-box;
            float: right;
        }

        .recom-column ul li a{
            float: left;
        }

        .recom-column ul li a img{
            width: 250px;
        }

        .recom-column ul li a img:hover{
            opacity: .7;
        }
        /* 推荐栏结束 */

        /* rank开始 */
        /* hot开始 */
        .rank{
            width: 1200px;
            margin: 10px auto;
        }

        .rank .hot{
            width: 312px;
            height: 78px;
            margin: 0 auto;
        }

        .rank .hot a{
            float: left;
            text-align: center;
        }

        .rank .hot a i{
            font-size: 40px;
            color: #dcdcdc;
        }

        .rank .hot a p{
            margin: 0;
            font-size: 16px;
            color: #999;
        }

        .rank .hot a:hover i{
            color: #ff713f;
        }

        .rank .hot a:hover p{
            color: #e60012;
        }

        .rank .hot a:nth-child(2){
            margin-left: 60px;
            margin-right: 60px;
        }
        /* hot结束 */

        /* sub-rank开始 */
        .rank .sub-rank{
            width: 1180px;
            height: 340px;
            margin: 10px auto;
        }

        .rank .sub-rank .box1{
            width: 269px;
            height: 328px;
            border: 1px solid #e1251b;
            margin: 0 12px 10px 12px;
            float: left;
        }

        .rank .sub-rank .box1 img{
            width: 200px;
            margin: 5px 34.5px 25px;
        }

        .rank .sub-rank .box2{
            height: 95px;
            background-color: #fafafa;
        }

        .rank .sub-rank .box2 a p{
            height: 50px;
            line-height: 28px;
            margin: 0;
            padding-left: 10px;
        }

        .rank .sub-rank .box2 span{
            display: block;
            height: 35px;
            font-size: 20px;
            color:#e1251b;
            padding-left: 10px;
            margin-top: 10px;
        }
        /* sub-rank结束 */
        /* rank结束 */

        /* banner开始 */
        .banner{
            width: 1200px;
            height: 281.6px;
            margin: 10px auto;
        }

        .banner .top-banner{
            height: 29.6px;
            line-height: 29.6px;
        }

        .banner .top-banner h3{
            float: left;
            margin: 0;
            font-size: 20px;
        }

        .banner .top-banner a{
            width: 66px;
            height: 25px;
            line-height: 25px;
            float: right;
        }
        
        .banner .top-banner a:hover span{
            color: #e1251b;
        }

        .banner .sub-banner{
            height: 250px;
            padding: 0 5px;
            border: 1px solid #e4e4e4;
        }

        .banner .sub-banner li{
            width: 198px;
            float: left;
            box-sizing: border-box;
            text-align: center;
        }

        .banner .sub-banner li a{
            width: 142px;
            height: 250px;
            display: inline-block;
        }

        .banner .sub-banner li a:hover img{
            animation-name: zzz;
            animation-duration: 1s;
            animation-direction: alternate;
            animation-timing-function: linear;
        }

        @keyframes zzz{
            0%{
                transform: scale(1);
                opacity: 1;
            }
            100%{
                transform: scale(1.1);
                opacity: .4;
            }
        }

        .banner .sub-banner li a div{
            width: 142px;
            border-right: 1px solid #e4e4e4;
            text-align: left;
        }

        .banner .sub-banner li a div strong{
            font-size: 20px;
            color: #df3033;
            line-height: 30px;
            margin: 9px 0;
        }
        /* banner结束 */

        /* floor开始 */
        .floor{
            width: 1200px;
            height: 410.6px;
            margin: 15px auto;
        }

        .floor .top-floor{
            width: 100%;
            height: 47.6px;
            border-bottom: 2px solid #c81623;
        }

        .floor .top-floor span{
            float: left;
            margin: 9px 0;
            font-size: 20px;
            line-height: 30px;
            color: #c81623;
            font-weight: 700;
        }

        .floor .top-floor ul{
            float: right;
            width: 464.562px;
            height: 30.8px;
            padding: 1px;
            margin-top: 13.4px;
        }

        .floor .top-floor ul li{
            float: left;
            margin-left: 5px;
            margin-right: 5px;
        }

        .floor .top-floor ul li::after{
            content: '|';
            color: #c81623;
            margin-left: 9px;
            margin-right: 2px;
        }

        .floor .top-floor ul #gaoduan::after{
            content: none;
        }

        .floor .top-floor ul li a{
            color: #c81623;
        }

        .floor .top-floor ul li a:hover{
            text-decoration: underline;
        }

        .floor .sub-floor{
            width: 100%;
            height: 360px;
        }

        .floor .sub-floor .floor-left-column{
            width: 209.35px;
            float: left;
            background-color: #f7f7f7;
        }

        .floor .sub-floor .floor-left-column ul{
            height: 79.8px;
            padding: 12px 0;
        }

        .floor .sub-floor .floor-left-column ul li{
            float: left;
            height: 25.6px;
            line-height: 25.6px;
            width: 83.737px;
            margin: 0 10px;
            text-align: center;
            border-bottom: 1px solid #e4e4e4;
        }

        .floor .sub-floor .floor-left-column img{
            width: 209.35px;
        }

        .floor .sub-floor .floor-lunbo{
            width: 329px;
            float: left;
            position: relative;
        }

        .floor .sub-floor .floor-lunbo .f-pic{
            height: 360px;
            position: relative;
        }

        .floor .sub-floor .floor-lunbo .f-pic a{
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
        }

        .floor .sub-floor .floor-lunbo .f-pic a img{
            width: 100%;
            height: 100%;
        }

        .floor .sub-floor .floor-lunbo .f-pic a:first-child{
            z-index: 1;
        }

        .floor .sub-floor .floor-lunbo .f-pic a:target{
            z-index: 2;
        }

        .floor .sub-floor .floor-lunbo .left-arrow{
            width: 27px;
            height: 44px;
            background-image: url(./img/icon-slides.png);
            background-position: -89px;
            position: absolute;
            z-index: 999;
            top: 50%;
            margin-top: -22px;
            left: 0;
        }

        .floor .sub-floor .floor-lunbo:hover .left-arrow{
            background-image: url(./img/icon-slides.png);
            background-position: -6px;
        }

        .floor .sub-floor .floor-lunbo .right-arrow{
            width: 27px;
            height: 44px;
            background-image: url(./img/icon-slides.png);
            background-position: -132px;
            position: absolute;
            z-index: 999;
            top: 50%;
            margin-top: -22px;
            right: 0;
        }

        .floor .sub-floor .floor-lunbo:hover .right-arrow{
            background-image: url(./img/icon-slides.png);
            background-position: -50px;
        }

        .floor .sub-floor .floor-lunbo ul{
            position: absolute;
            z-index: 999;
            top: 330px;
            left: 50%;
            margin-left: -27px;
        }

        .floor .sub-floor .floor-lunbo ul li{
            float: left;
        }

        .floor .sub-floor .floor-lunbo ul div{
            width: 8px;
            height: 8px;
            margin: 0 4px;
            border-radius: 50%;
            background-color: #9c94a4;
        }

        .floor .sub-floor .floor-lunbo ul div:hover{
            background-color: #007aff;
        }

        .floor .sub-floor .box3{
            width:219.33px;
            height: 360px;
            float: left;
        }

        .floor .sub-floor .box3 img{
            height: 180px;
            float: left;
            border-bottom: 1px solid #e4e4e4;
        }

        .floor .sub-floor .box3 img:hover{
            opacity: .7;
        }

        .floor .sub-floor .box4{
            float: left;
        }

        .floor .sub-floor .box4 img{
            width: 220px;
            height: 360px;
            border: 1px solid #e4e4e4;
        }

        .floor .sub-floor .box5{
            width:220px;
            height: 360px;
            float: left;
        }

        .floor .sub-floor .box5 img{
            width: 100%;
            height: 180px;
            float: left;
            border-bottom: 1px solid #e4e4e4;
        }

        .floor .sub-floor .box5 img:hover{
            opacity: .7;
        }
        /* floor结束 */

        /* bottom-nav-list开始 */
        .bottom-nav-list{
            width: 1200px;
            height: 37px;
            margin: 0 auto;
            padding-top: 15px;
            padding-bottom: 15px;
            background-color: #f7f7f7;
        }

        .bottom-nav-list li{
            width: 100px;
            height: 37px;
            float: left;
            border-right: 1px dotted #cccccc;
            padding-left: 10px;
            padding-right: 9px;
        }
        .bottom-nav-list li:last-of-type{
            border-right: none;
        }
        /* bottom-nav-list结束 */

        /* footer开始 */
        .footer{
            width: 1519.2px;
            height: 315.2px;
            background-color: #eaeaea;
        }

        .footer .top-footer{
            min-width: 1519.2px;
            width: 100%;
            height: 162.6px;
            border: 1px solid #e4e1e1;
            padding-top: 20px;
            padding-bottom: 20px;
            margin-top: 10px;
        }

        .footer .top-footer dl{
            float: left;
            margin-left: 87.5px;
            margin-right: 87.5px;
        }

        .footer .top-footer dl dt{
            font-weight: bold;
            font-size: 14px;
        }

        .footer .top-footer dl dd{
            margin-left: 0;
            font-size: 12px;
        }

        .footer .sub-footer{
            width: 100%;
            padding: 20px 0;
            text-align: center;
        }

        .footer .sub-footer ul{
            text-align: center;
            margin-bottom: 15px;
        }

        .footer .sub-footer ul li{
            display: inline-block;
            padding-right: 10px;
            border-right: 1px solid #333333;
            margin-right: 10px;
        }

        .footer .sub-footer .site{
            margin-bottom: 10px;
        }
        /* footer结束 */
    </style>
</head>

<body>
    <!-- 顶部条开始 -->
    <div class="top-bar-wrapper">
        <div class="top-bar clearfix">
            <div>尚品汇欢迎您!&nbsp;&nbsp;&nbsp;&nbsp;请<a href="#">登录</a><a href="#" class="last"> 免费注册</a></div>
            <ul>
                <li><a href="">我的订单</a></li>
                <li><a href="">我的购物车</a></li>
                <li><a href="">我的尚品汇</a></li>
                <li><a href="">尚品汇会员</a></li>
                <li><a href="">企业采购</a></li>
                <li><a href="">关注尚品汇</a></li>
                <li><a href="">合作招商</a></li>
                <li><a class="last" href="">商家后台</a></li>
            </ul>
        </div>
    </div>
    <!-- 顶部条结束 -->

    <!-- 页面头部开始 -->
    <div class="head">
        <div class="log">
            <a href="#">
                <img src="./img/Logo.png" alt="">
            </a>
        </div>
        <div class="search">
            <input type="text" name="search">
            <button>搜索</button></div>
    </div>
    <!-- 页面头部结束 -->

    <!-- 顶部菜单开始 -->
    <div class="menu">
        <ul>
            <li id="list">全部商品分类</li>
            <li><a href="">服装城</a></li>
            <li><a href="">美妆馆</a></li>
            <li><a href="">尚品汇超市</a></li>
            <li><a href="">全球购</a></li>
            <li><a href="">闪购</a></li>
            <li><a href="">团购</a></li>
            <li><a href="">有趣</a></li>
            <li><a href="">秒杀</a></li>
        </ul>
    </div>
    <!-- 顶部菜单结束 -->

    <!-- 页面主体部分开始 -->
    <div class="main clearfix">
        <ul class="left-nav-list">
            <li>
                <a href="#">图书/音像/电子书刊</a>
                <div>李航真帅！</div>
            </li>
            <li>
                <a href="#">手机</a>
                <div>静哥更帅！</div>
            </li>
            <li>
                <a href="#">家用电器</a>
                <div>静哥是我心中的男神！</div>
            </li>
            <li>
                <a href="#">数码</a>
                <div></div>
            </li>
            <li>
                <a href="#">家居家装</a>
                <div></div>
            </li>
            <li>
                <a href="#">电脑办公</a>
                <div></div>
            </li>
            <li>
                <a href="#">厨具</a>
                <div></div>
            </li>
            <li>
                <a href="#">个护化妆</a>
                <div></div>
            </li>
            <li>
                <a href="#">服饰内衣</a>
                <div></div>
            </li>
            <li>
                <a href="#">钟表</a>
                <div></div>
            </li>
            <li>
                <a href="#">鞋靴</a>
                <div></div>
            </li>
            <li>
                <a href="#">母婴</a>
                <div></div>
            </li>
            <li>
                <a href="#">礼品箱包</a>
                <div></div>
            </li>
            <li>
                <a href="#">食品饮料/保健食品</a>
                <div></div>
            </li>
            <li>
                <a href="#">珠宝</a>
                <div></div>
            </li>
            <li>
                <a href="#">汽车用品</a>
                <div></div>
            </li>
        </ul>
        <!-- 轮播图 -->
        <div class="lunbo">
            <ul>
                <li>
                    <a id="pic1" href="#">
                            <img src="./img/rBHu8mHhRGGAOXgOAAYtxcnkJgc441.png" alt="">
                    </a>
                </li>
                <li>
                    <a id="pic2" href="#">
                        <img src="./img/rBHu8mHhRHeAFFGHAAmcai-tfmo040.png" alt="">
                    </a>
                </li>
                <li>
                    <a id="pic3" href="#">
                        <img src="./img/rBHu8mHhRNeAEKneAAPxudazj1Q182.png" alt="">
                    </a>
                </li>
            </ul>

            <div class="arrow-prev"></div>
            <div class="arrow-next"></div>

            <div class="dot">
               <a href="#pic1"><div class="active"></div></a>
                <a href="#pic2"><div></div></a>
                <a href="#pic3"><div></div></a>
            </div>
        </div>
        <!-- 右侧栏 -->
        <div class="right-column">
            <div class="jl">
                <div class="top">
                    <h4>尚品汇快报</h4>
                    <span>更多></span>
                </div>
                <ul>
                    <li><b>[特惠]</b>备战开学季 全民半价购数码</li>
                    <li><b>[公告]</b>备战开学季 全民半价购数码</li>
                    <li><b>[特惠]</b>备战开学季 全民半价购数码</li>
                    <li><b>[公告]</b>备战开学季 全民半价购数码</li>
                    <li><b>[特惠]</b>备战开学季 全民半价购数码</li>
                </ul>
                <div class="jingling">
                    <div>
                        <a href="">
                            <span class="hf iconfont" style="color: red; font-size: 30px;">&#xef58;</span>
                            <b>话费</b>
                        </a>
                    </div>
                    <div>
                        <a href="">
                            <span class="jp iconfont" style="color: red; font-size: 30px;">&#xef56;</span>
                            <b>机票</b>
                        </a>
                    </div>
                    <div>
                        <a href="">
                            <span class="dyp iconfont" style="color: red; font-size: 30px;">&#xef52;</span>
                            <b class="du">电影票</b>
                        </a>
                    </div>
                    <div>
                        <a href="">
                            <span class="yx iconfont" style="color: red; font-size: 30px;">&#xef53;</span>
                            <b>游戏</b>
                        </a>
                    </div>
                    <div>
                        <a href="">
                            <span class="cp iconfont" style="color: red; font-size: 30px;">&#xef59;</span>
                            <b>彩票</b>
                        </a>
                    </div>
                    <div>
                        <a href="">
                            <span class="jyz iconfont" style="color: red; font-size: 30px;">&#xef5a;</span>
                            <b class="du">加油站</b>
                        </a>
                    </div>
                    <div>
                        <a href="">
                            <span class="jd iconfont" style="color: red; font-size: 30px;">&#xef54;</span>
                            <b>酒店</b>
                        </a>
                    </div>
                    <div>
                        <a href="">
                            <span class="hcp iconfont" style="color: red; font-size: 30px;">&#xef57;</span>
                            <b class="du">火车票</b>
                        </a>
                    </div>
                    <div>
                        <a href="">
                            <span class="zc iconfont" style="color: red; font-size: 30px;">&#xef5c;</span>
                            <b>众筹</b>
                        </a>
                    </div>
                    <div>
                        <a href="">
                            <span class="lc iconfont" style="color: red; font-size: 30px;">&#xef55;</span>
                            <b>理财</b>
                        </a>
                    </div>
                    <div>
                        <a href="">
                            <span class="lpk iconfont" style="color: red; font-size: 30px;">&#xef5d;</span>
                            <b class="du">礼品卡</b>
                        </a>
                    </div>
                    <div>
                        <a href="">
                            <span class="bt iconfont" style="color: red; font-size: 30px;">&#xef5b;</span>
                            <b>白条</b>
                        </a>
                    </div>
                </div>
            </div>
            <div>
                <a href="#">
                    <img src="./img/ad1.b21563b0.png" alt="">
                </a>
            </div>
        </div>
    </div>
    <!-- 页面主体部分结束 -->

    <!-- 推荐栏开始 -->
    <div class="recom-column">
        <div>
            <i class="iconfont">&#xe8c4;</i>
            <span>今日推荐</span>
        </div>
        <ul>
            <li>
                <a href="#">
                    <img src="./img/today01.a73b6422.png" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./img/today02.5fea2d9f.png" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./img/today03.64379233.png" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./img/today04.8d34fdb9.png" alt="">
                </a>
            </li>
        </ul>
    </div>
    <!-- 推荐栏结束 -->

    <!-- rank开始 -->
    <div class="rank">
        <div class="hot">
            <a class="active" href="#">
                <i class="iconfont">&#xe709;</i>
                <p>热卖排行</p>
            </a>
            <a href="#">
                <i class="iconfont">&#xe709;</i>
                <p>特价排行</p>
            </a>
            <a href="#">
                <i class="iconfont">&#xe709;</i>
                <p>新品排行</p>
            </a>
        </div>
        <div class="sub-rank">

            <div class="box1">
                <a href=""><img src="./img/1.08947ef2.jpg" alt=""></a>
                <div class="box2">
                    <a href="">
                        <p>【官网价直降1100】Apple iPhone 8 Plus 256GB 银色 移动联通电信4G手机</p>
                    </a>
                    <span>定金：￥100.00</span>
                </div>
            </div>
            <div class="box1">
                <a href=""><img src="./img/1.08947ef2.jpg" alt=""></a>
                <div class="box2">
                    <a href="">
                        <p>【官网价直降1100】Apple iPhone 8 Plus 256GB 银色 移动联通电信4G手机</p>
                    </a>
                    <span>定金：￥100.00</span>
                </div>
            </div>
            <div class="box1">
                <a href=""><img src="./img/1.08947ef2.jpg" alt=""></a>
                <div class="box2">
                    <a href="">
                        <p>【官网价直降1100】Apple iPhone 8 Plus 256GB 银色 移动联通电信4G手机</p>
                    </a>
                    <span>定金：￥100.00</span>
                </div>
            </div>
            <div class="box1">
                <a href=""><img src="./img/1.08947ef2.jpg" alt=""></a>
                <div class="box2">
                    <a href="">
                        <p>【官网价直降1100】Apple iPhone 8 Plus 256GB 银色 移动联通电信4G手机</p>
                    </a>
                    <span>定金：￥100.00</span>
                </div>
            </div>
            
        </div>
    </div>
    <!-- rank结束 -->

    <!-- banner开始 -->
    <div class="banner">
        <div class="top-banner">
            <h3>猜你喜欢</h3>
            <a href="">
            <span>换一换</span>
            <i class="iconfont" style="font-size: 20px; color: #ff713f;">&#xe7a9;</i>
            </a>
        </div>
        <ul class="sub-banner">
            <li>
                <a href="">
                    <img src="./img/like_02.f9bad374.png" alt="">
                    <div>
                        <p>阳光美包新款单肩包女包时尚子母包四件套女</p>
                        <strong>￥116.00</strong>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./img/下载.png" alt="">
                    <div>
                        <p>阳光美包新款单肩包女包时尚子母包四件套女</p>
                        <strong>￥116.00</strong>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./img/like_01.2dfb0454.png" alt="">
                    <div>
                        <p>阳光美包新款单肩包女包时尚子母包四件套女</p>
                        <strong>￥116.00</strong>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./img/like_02.f9bad374.png" alt="">
                    <div>
                        <p>阳光美包新款单肩包女包时尚子母包四件套女</p>
                        <strong>￥116.00</strong>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./img/下载.png" alt="">
                    <div>
                        <p>阳光美包新款单肩包女包时尚子母包四件套女</p>
                        <strong>￥116.00</strong>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./img/like_01.2dfb0454.png" alt="">
                    <div>
                        <p>阳光美包新款单肩包女包时尚子母包四件套女</p>
                        <strong>￥116.00</strong>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <!-- banner结束 -->

    <!-- floor开始 -->
    <div class="floor">
        <!--  -->
        <div class="top-floor">
            <span>家用电器</span>
            <ul>
                <li><a href="">热门</a></li>
                <li><a href="">大家电</a></li>
                <li><a href="">生活电器</a></li>
                <li><a href="">厨房电器</a></li>
                <li><a href="">应季电器</a></li>
                <li><a href="">空气/净水</a></li>
                <li id="gaoduan"><a href="">高端电器</a></li>
            </ul>
        </div>
        <!--  -->
        <div class="sub-floor">

            <div class="floor-left-column">
                <ul>
                    <li>节能补贴</li>
                    <li>4k电视</li>
                    <li>空气净化器</li>
                    <li>IH电饭煲</li>
                    <li>滚筒洗衣机</li>
                    <li>电热水器</li>
                </ul>
                <img src="./img/a.img/floor-1-1.png" alt="">
            </div>
            <!-- 轮播图 -->
            <div class="floor-lunbo">
                <div class="f-pic">
                    <a id="floor-1-b01">
                        <img src="./img/xiaolunbo/floor-1-b01.png" alt="">
                    </a>
                    <a id="floor-1-b02">
                        <img src="./img/xiaolunbo/floor-1-b02.png" alt="">
                    </a>
                    <a id="floor-1-b03">
                        <img src="./img/xiaolunbo/floor-1-b03.png" alt="">
                    </a>
                </div>
                <div class="left-arrow"></div>
                <div class="right-arrow"></div>
                <ul>
                    <li>
                        <a href="#floor-1-b01">
                            <div class="active"></div>
                        </a>
                    </li>
                    <li>
                        <a href="#floor-1-b02">
                            <div></div>
                        </a>
                    </li>
                    <li>
                        <a href="#floor-1-b03">
                            <div></div>
                        </a>
                    </li>
                </ul>
            </div>

            <div class="box3">
                <img src="./img/a.img/floor-1-2.png" alt="">
                <img src="./img/a.img/floor-1-3.png" alt="">
            </div>

            <div class="box4">
                <img src="./img/a.img/floor-1-4.png" alt="">
            </div>

            <div class="box5">
                <img src="./img/a.img/floor-1-5.png" alt="">
                <img src="./img/a.img/floor-1-6.png" alt="">
            </div>

        </div>
    </div>
    <!-- floor结束 -->

    <!-- floor1开始 -->
    <div class="floor">
        <!--  -->
        <div class="top-floor">
            <span>手机通讯</span>
            <ul>
                <li><a href="">热门</a></li>
                <li><a href="">大家电</a></li>
                <li><a href="">生活电器</a></li>
                <li><a href="">厨房电器</a></li>
                <li><a href="">应季电器</a></li>
                <li><a href="">空气/净水</a></li>
                <li id="gaoduan"><a href="">高端电器</a></li>
            </ul>
        </div>
        <!--  -->
        <div class="sub-floor">

            <div class="floor-left-column">
                <ul>
                    <li>节能补贴2</li>
                    <li>4k电视2</li>
                    <li>空气净化器2</li>
                    <li>IH电饭煲2</li>
                    <li>滚筒洗衣机2</li>
                    <li>电热水器2</li>
                </ul>
                <img src="./img/a.img/floor-1-1.png" alt="">
            </div>
            <!-- 轮播图 -->
            <div class="floor-lunbo">
                <div class="f-pic">
                    <a id="floor-1-b04">
                        <img src="./img/xiaolunbo/floor-1-b01.png" alt="">
                    </a>
                    <a id="floor-1-b05">
                        <img src="./img/xiaolunbo/floor-1-b02.png" alt="">
                    </a>
                    <a id="floor-1-b06">
                        <img src="./img/xiaolunbo/floor-1-b03.png" alt="">
                    </a>
                </div>
                <div class="left-arrow"></div>
                <div class="right-arrow"></div>
                <ul>
                    <li>
                        <a href="#floor-1-b04">
                            <div></div>
                        </a>
                    </li>
                    <li>
                        <a href="#floor-1-b05">
                            <div></div>
                        </a>
                    </li>
                    <li>
                        <a href="#floor-1-b06">
                            <div></div>
                        </a>
                    </li>
                </ul>
            </div>

            <div class="box3">
                <img src="./img/a.img/floor-1-2.png" alt="">
                <img src="./img/a.img/floor-1-3.png" alt="">
            </div>

            <div class="box4">
                <img src="./img/a.img/floor-1-4.png" alt="">
            </div>

            <div class="box5">
                <img src="./img/a.img/floor-1-5.png" alt="">
                <img src="./img/a.img/floor-1-6.png" alt="">
            </div>

        </div>
    </div>
    <!-- floor1结束 -->

    <!-- bottom-nav-list开始 -->
    <ul class="bottom-nav-list clearfix">
        <li>
            <img src="./img/bottom-nav-bar/下载.png" alt="">
        </li>
        <li>
            <img src="./img/bottom-nav-bar/下载 (1).png" alt="">
        </li>
        <li>
            <img src="./img/bottom-nav-bar/下载 (2).png" alt="">
        </li>
        <li>
            <img src="./img/bottom-nav-bar/下载 (3).png" alt="">
        </li>
        <li>
            <img src="./img/bottom-nav-bar/下载 (4).png" alt="">
        </li>
        <li>
            <img src="./img/bottom-nav-bar/下载 (5).png" alt="">
        </li>
        <li>
            <img src="./img/bottom-nav-bar/下载 (6).png" alt="">
        </li>
        <li>
            <img src="./img/bottom-nav-bar/下载 (7).png" alt="">
        </li>
        <li>
            <img src="./img/bottom-nav-bar/下载 (8).png" alt="">
        </li>
        <li>
            <img src="./img/bottom-nav-bar/下载 (9).png" alt="">
        </li>
    </ul>
    <!-- bottom-nav-list结束 -->

    <!-- footer开始 -->
    <div class="footer">
        <div class="top-footer">
            <dl>
                <dt>购物指南</dt>
                <dd>购物流程</dd>
                <dd>会员介绍</dd>
                <dd>生活旅行/团购</dd>
                <dd>常见问题</dd>
                <dd>购物指南</dd>
            </dl>
            <dl>
                <dt>配送方式</dt>
                <dd>上门自提</dd>
                <dd>211限时达</dd>
                <dd>配送服务查询</dd>
                <dd>配送费收取标准</dd>
                <dd>海外配送</dd>
            </dl>
            <dl>
                <dt>支付方式</dt>
                <dd>货到付款</dd>
                <dd>在线支付</dd>
                <dd>分期付款</dd>
                <dd>邮局汇款</dd>
                <dd>公司转账</dd>
            </dl>
            <dl>
                <dt>售后服务</dt>
                <dd>售后政策</dd>
                <dd>价格保护</dd>
                <dd>退款说明</dd>
                <dd>返修/退换货</dd>
                <dd>取消订单</dd>
            </dl>
            <dl>
                <dt>特色服务</dt>
                <dd>夺宝岛</dd>
                <dd>DIY装机</dd>
                <dd>延保服务</dd>
                <dd>尚品汇E卡</dd>
                <dd>尚品汇通信</dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd>
                    <img src="./img/wx_cz.7cc5834b.jpg" alt="">
                </dd>
            </dl>
        </div>
        <div class="sub-footer">
            <ul>
                <li>关于我们</li>
                <li>联系我们</li>
                <li>商家入驻</li>
                <li>营销中心</li>
                <li>友情链接</li>
                <li>关于我们</li>
                <li>联系我们</li>
                <li>商家入驻</li>
                <li>营销中心</li>
                <li>友情链接</li>
            </ul>
            <p class="site">地址: 北京市昌平区宏福科技园综合楼6层</p>
            <p>京ICP备19006430号</p>
        </div>
    </div>
    <!-- footer结束 -->
</body>

</html>